<template>
  <div>
    <div id="map" style="width: 100%; height: 500px;"></div>
  </div>
</template>

<script>
export default {
  name: 'BaiduMapComponent',
  mounted() {
    this.loadBaiduMapScript().then(() => {
      this.initMap();
    }).catch(error => {
      console.error('百度地图加载失败:', error);
    });
  },
  methods: {
    loadBaiduMapScript() {
      return new Promise((resolve, reject) => {
        if (typeof BMapGL !== 'undefined') {
          resolve(); // 如果已经加载，直接返回
          return;
        }
        const script = document.createElement('script');
        script.src = "https://api.map.baidu.com/api?v=3.0&ak=6YEr1vwJxdIPiQhGcCiyvc6NyiDHRUZ2";
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
      });
    },
    initMap() {
      const map = new BMapGL.Map("map");
      const point = new BMapGL.Point(116.404, 39.915);
      map.centerAndZoom(point, 15);
      map.addControl(new BMapGL.ZoomControl());
      map.addControl(new BMapGL.ScaleControl());
    }
  }
};
</script>

<style scoped>
#map {
  width: 100%;
  height: 500px;
}
</style>
